<template>
    <XClickDialog ref='dialogRef' title='分配商户' width='600px' @close='close' @open='open' :confirm='confirm'>
        <slot></slot>
        <template #content>
            <el-form ref='formRef' size='mini' label-width='80px' label-position='top' :rules='rules' :model='formData'>
                <el-form-item label='名称' prop='name'>
                    <el-input type='text' clearable show-word-limit :maxlength='rules.name[1].max' v-model='formData.name' />
                </el-form-item>
                <el-form-item label='备注' prop='remark' :rules='[{required : false}]'>
                    <el-input type='text' clearable show-word-limit :maxlength='30' v-model='formData.remark' />
                </el-form-item>
                <el-form-item label='菜单'>
                    <div style='display:flex'>
                        <el-card style='flex:1'>
                            <Menu ref='menuRef' @nodeClick='nodeClick'></Menu>
                        </el-card>
                        <el-card style='flex:1;margin-left:20px;'>
                            <Rule ref='ruleRef'></Rule>
                        </el-card>
                    </div>
                </el-form-item>
                <div style='display:none'>
                    <el-form-item label='id' prop='id' :rules='[{required : false}]'>
                        <el-input type='hidden' v-model.number='formData.id'></el-input>
                    </el-form-item>
                </div>
            </el-form>
        </template>
    </XClickDialog>
</template>

<script lang='ts' setup>
    import { nextTick, reactive, ref } from 'vue'
    import { addRoleApi, deleteRoleApi, editRoleApi, getRolesApi } from '../../../api/permissionRole'
    import { ElMessage } from 'element-plus'
    import Menu from './Menu.vue'
    import Rule from './Rule.vue'

    const props = defineProps<{
        formData? : {
            id:number,
            name:string,
            remark:string,
            menus:number[],
            rules:number[]
        }
    }>()

    const emit = defineEmits<{
        (e : 'finish') : void
    }>()

    const menuRef = ref()
    const ruleRef = ref()

    const formRef = ref()
    const formData = reactive({
        id : 0,
        name : '',
        remark : ''
    })

    const rules = reactive<{[key in keyof (typeof formData)]?:any[]}>({
        name : [
            {
                required : true,
                message : '请输入名称'
            },
            {
                min : 1,
                max : 10,
                message: '名称长度在1-10个字符之间',
            }
        ]
    })

    function nodeClick(id:number) {
        ruleRef.value.getRules(id)
    }

    const dialogRef = ref()

    function resetForm() {
        formRef.value.resetFields()
        nextTick(() => {
            formRef.value.clearValidate()
        })
    }

    async function confirm() {
        try {
            await formRef.value.validate()

            const menus = menuRef.value.getValues()

            const rules = ruleRef.value.getValues()

            let data:any = {...formData}

            if(menus.length > 0) {
                data.menus = menus
            }

            if(rules.length > 0) {
                data.rules = rules
            }

            const res = await (data.id ? editRoleApi(data.id, data) : addRoleApi(data))
            if(res.success) {
                ElMessage.success('保存成功')
                resetForm()
                dialogRef.value.close()
                emit('finish')
            }else {
                ElMessage.error!(res.msg)
            }
        } catch (error) {
            
        }
    }

    function open() {
        if(props.formData) {
            formData.id = props.formData.id
            formData.name = props.formData.name
            formData.remark = props.formData.remark

            if(props.formData.menus) {
                menuRef.value.setValues(props.formData.menus)
            }

            if(props.formData.rules) {
                ruleRef.value.setValues(props.formData.rules)
            }
        }
    }

    function close() {
        
    }
</script>
